<template>
	<view class="contain-body">
		<uni-search-bar @confirm="search" :focus="true" v-model="searchValue" @blur="blur" @focus="focus" @input="input"
			@cancel="cancel" placeholder="搜索宝贝,开启快乐分期生活" cancelButton="none" clearButton="none">
		</uni-search-bar>
		<view class="contentOverflow">
			<view class="" style="height: 100%;">
				<view class="threeTab">
					<view class="threeTab-item" v-for="(item,index) in functionBoxList" :key="item.title"
						@click="goToItemPage(item,index)" :class="TypeIndex === index ? 'activeItem':''">
						<image :src="item.url" mode="" class="imageTab"></image>
						<text>{{item.title}}</text>
					</view>
				</view>
				<view class="" style="height: calc( 100% - 92px);overflow-y: auto;">
					<shop-list :typeValue="typeValue" :sortType="sortType" :typeList="typeList" :shopList="shopList"
						@changeType="handleChangeType" @detail="handleDetail" @sort="handleSort"></shop-list>
				</view>

			</view>
		</view>

	</view>
</template>

<script>
	// import menuList from '@/components/sehochen-left-menu/menuList.vue';
	export default {
		data() {
			return {
				TypeIndex: 0,
				functionBoxList: [{
						url: '/static/iphone15.png',
						title: '苹果旗舰'
					},
					{
						url: '/static/mianmo.png',
						title: '美容面膜'
					},
					{
						url: '/static/mianmo.png',
						title: '美容面膜'
					},
					{
						url: '/static/mianmo.png',
						title: '美容面膜'
					},

					{
						url: '/static/more.png',
						title: '更多新品',
					},
				],
				sortType: ' ',
				typeValue: '1',
				typeList: [{
					_id: '1',
					label: '全部'
				}, {
					_id: '2',
					label: '苹果15'
				}, {
					_id: '3',
					label: '苹果14'
				}, {
					_id: '4',
					label: '苹果13'
				},  ],
				shopList: [{
					_id: '1',
					title: 'iPhoen 15',
					desc: '显示优惠|下单立减',
					tagList: '想分就分',
					price: 1688.00,
					discount: '原装未拆封',
					sale: 100,
					originPrice: '/期起',
					titleTag: '全新国行',
					titleTag2:'下单秒审',
					url: '/static/iphone15.png',
				}, {
					_id: '2',
					title: '精选海南哈密瓜4kg',
					desc: '新鲜采摘 | 口感享甜',
					tagList: '换购',
					price: 22.99,
					discount: 5.5,
					sale: 10,
					originPrice: 26.99,
					titleTag: '限时秒杀',
					url: 'https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/fruit2.jpeg'
				}, {
					_id: '3',
					title: '爆汁圣女果500g',
					desc: '本地种植 | 甜甜蜜蜜',
					tagList: '买一送一',
					price: 10.80,
					discount: 10,
					sale: 20,
					originPrice: 14.99,
					url: 'https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/fruit3.jpeg'
				}, {
					_id: '4',
					title: '海南小台农芒果500g(单果60g期)',
					desc: '香甜细腻',
					tagList: '优惠',
					price: 22.90,
					sale: 30,
					discount: 9.8,
					originPrice: 28.99,
					url: 'https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/fruit4.jpeg'
				}, {
					_id: '5',
					title: '云南人参果500g(单果50g起)',
					desc: '果肉清香 | 高甜水润',
					tagList: '换购',
					sale: 40,
					discount: 10,
					price: 24.90,
					originPrice: 28.90,
					url: 'https://mp-bcaa355d-ec14-4cb2-a10e-482127e7cb48.cdn.bspapp.com/fruit5.jpeg'
				}]
			}

			// }
		},
		methods: {
			//列表的点击事件
			myEvent(e) {
				console.log('myEvent=-------666', e)
				// console.log(e.label)
			},
			handleChangeType(typeValue) {
				this.typeValue = typeValue;
				console.log('this.typeValue,this.typeValue',this.typeValue)
			},
			handleDetail(item) {
				console.log(item);
				uni.navigateTo({
					url: "/pages/classify/phone-details"
				})
			},
			handleSort(sortType) {
				console.log('this.sortType---',sortType)
				this.sortType = sortType
			},
			//菜单的点击事件
			myMenu(e) {
				// console.log('myMenu=-------555', e);
				// console.log(e.title)
				this.currentSmallType = e.title;
				if (this.currentBigType == '农产品') {
					this.lists = this.productsList;
				} else if (this.currentBigType == '种子') {
					this.lists = this.seedList;
				} else if (this.currentBigType == '肥料') {
					this.lists = this.fertilizerList;
				} else if (this.currentBigType == '农业机械') {
					this.lists = this.machineryList;
				} else {
					this.lists = this.otherList;
				}
				this.querySaleGoodsList(this.currentBigType, e.title, false);
			},
			goToItemPage(item, index) {
				this.TypeIndex = index;

			},
		}
	}
</script>

<style>
	::v-deep .uni-searchbar__box {
		border-radius: 36px !important;
	}

	::v-deep .uni-searchbar {
		background-color: #FF8B07 !important;
		padding: 0 10px 5px 10px !important;
	}

	.threeTab {
		width: 100%;
		padding: 10px;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}

	.threeTab-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 12px;
		color: #404040;
		margin-right: 20px;
	}

	.threeTab .threeTab-item:last-child {
		margin: 0px;
	}

	.threeTab-item .imageTab {
		width: 56px;
		height: 56px;
		background: linear-gradient(180deg, #FED9BF, #f38978);
		border-radius: 50%;
		padding: 5px;
		box-sizing: border-box;
		border: 1px solid #fff;
	}

	.activeItem .imageTab {
		border: 1px solid #FF8B07 !important;
		color: #FF8B07 !important;
	}
</style>
